<template>
    <div class="box"  style="height:100% ;width:100% ;">
        <van-nav-bar style="position: fixed ;width: 100%;z-index: 100;" :title="title">
            <template #left v-if="showLeft">
                <div @click="onClickLeft" style="color:#fff ;">
                    <van-icon name="wap-home-o" v-if="textLeft == '主页'" />
                    <van-icon name="arrow-left" v-else />
                    {{ textLeft }}
                </div>
            </template>
            <template #right>
                <van-icon name="search" size="18" @click="visible = !visible" v-if="showRight" />
            </template>
        </van-nav-bar>

        <div style="height:50px ;"></div>
        <div v-show="visible && showRight"
            style="position: fixed ;width: 100%;z-index: 100;top:50px ;background-color: #f7f8fa;">
            <van-form @submit="onSubmit" style="margin:16px 0;">
                <van-cell-group inset>
                    <van-field v-model="UserName" name="用户姓名" label="用户姓名" placeholder="查询用户姓名" />
                    <van-field v-model="DemandId" name="订单单号" label="订单单号" placeholder="查询订单单号" />
                    <van-button block native-type="submit" color="#466ca3">
                        查询
                    </van-button>
                </van-cell-group>
            </van-form>
        </div>

        <div v-show="visible && showRight" style="height:164px ;"></div>
        <router-view></router-view>
    </div>
</template>

<script setup>
import { provide, reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
var router = useRouter();
var title = ref('Ryder IT 服务管理系统');
var showLeft = ref(true);
var showRight = ref(false);
var textLeft = ref('返回');
const RYD_UserId = sessionStorage.getItem('RYD_UserId');
var visible = ref(false);
var UserName = ref('');
var DemandId = ref('');
var RYD_UserName = ref('');
var RYD_DemandId = ref('');
let searchId = ref(1);

const onClickLeft = () => {
    if (textLeft.value == "主页") {
        router.push('AndroidHomePage');
    } else {
        history.back();
    }
};
provide('nav', reactive({
    showLeft, textLeft, title, showRight, visible
}))
provide('RYD_UserId', RYD_UserId)

let onSubmit = () => {
    RYD_UserName.value = UserName.value;
    RYD_DemandId.value = DemandId.value;
    searchId.value++;
    UserName.value = "";
    DemandId.value = "";
}

provide('search', reactive({
    RYD_UserName, RYD_DemandId, searchId
}))

</script>

<style scoped>
.box {
    --van-nav-bar-background-color: #466ca3;
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
    --van-nav-bar-text-color: #fff;
}
</style>
